<template>
	<view class="flex-column" style="width: calc(100vw - 32px); margin-left: 16px; margin-top: 15px; color: #313C56;">
		<view v-for="(item,index) in datas" :key="index" :style="{marginTop: index == 0 ? '0px' : '24px'}">
			<text class="font-14 font-weight-medium">{{ item.title }}</text>
			<view v-for="(subItem,subIndex) in item.items" :key="subIndex" class="task-pay-item flex-row flex-items-center flex-between"
            @click="tapItem(index, subIndex)">
				<text style="margin-left: 16px;">{{ $tools.empty(subItem.title) }}</text>
				<view class="flex-row flex-items-center">
					<text class="font-18">{{ subItem.amount }}</text>
					<text style="color: #6B7885; margin-left: 4px; margin-right: 16px;">{{ subItem.unit }}</text>
					<image :src="`/static/select${subItem.select ? 'ed': ''}.png`" style="width: 16px; height: 16px; margin-right: 16px;"></image>
				</view>
			</view>	
		</view>
		<view class="flex-row flex-end flex-items-end" style="margin-top: 40px;">
			<text class="task-pay-text">总计：</text>
			<text class="task-pay-text_medium">{{ USDT }}</text>
			<text class="task-pay-text">USDT</text>
			<text class="task-pay-text_medium" style="margin-left: 16px;">{{SPX}}</text>
			<text class="task-pay-text">SPX</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "task-pay",
		/**
		 *	项目ID
		 * 
		 */
		porps: {
			list: {
				type: Array,
				default: () => []
			},
		},
		
		data() {
			return {
				params:{
					projectId: 0,
					USDT: '',
					USDT_MARGIN: '',
					SPX: ''
				},
				datas: [],
				USDT: '0',
				SPX: '0'
			};
		},
		watch: {
			datas: {
				immediate: true,
				handler(newVal) {
					console.log(newVal)
					this.formatAmount()
				}
			}
		},
		methods: {
			
			formatAmount() {
				let usdt = 0, spx = 0;
				for (var i = 0; i < this.datas.length; i++) {
					for (var j = 0; j < this.datas[i].items.length; j++) {
						if (this.datas[i].items[j].select) {
							if (this.datas[i].items[j].unit == 'USDT') {
								usdt = usdt + Number(this.datas[i].items[j].amount)
							} else{
								spx = spx + Number(this.datas[i].items[j].amount)
							}
						}
						
					}
				}
				console.log(this.datas)
				this.USDT = usdt.toFixed(2)
				this.SPX = spx.toFixed(2)
			},
			tapItem(index, subIndex) {
				console.log(this.params)
				// this.datas[index].items[subIndex].select = !this.datas[index].items[subIndex].select
				// this.formatAmount()
			}
		}
	}
</script>

<style>
	.task-pay-item {
		border: 1px solid #EFF0F4;
		border-radius: 12px;
		color: #313C56;
		font-size: 14px;
		font-weight: 400;
		width: 100%;
		height: 56px;
		margin-top: 12px;
	}
	.task-pay-text {
		color: #6B7885;
		font-size: 14px;
		font-weight: 400;
		margin-bottom: 4px;
	}

	.task-pay-text_medium {
		color: #313C56;
		font-size: 24px;
		font-weight: 500;
	}
</style>